<template>
    <div class="page">
        <div class="master-content">
            <div class="user-info">
                <img class="user-icon" :src="user.src">
                <span class="name">{{user.name}}</span>
                <span class="right-text">
                <!--<img class="mzsm-icon" src="../../assets/mzsm.svg">-->
                <!--<span>免职说明</span>-->
            </span>
            </div>
            <div class="content-view">{{content}}</div>
            <div class="imgs-box">
                <img v-for="(item, key) in imgs" :key="key" :src="item">
            </div>
            <div class="date">
                <span>{{date}}</span>
                <span class="right-text">
                    <img src="../../assets/browse.png">
                    <span>{{seeNumber}}</span>
                </span>
            </div>
        </div>
        <!--<advertisement-box class="advertisement-box" img="http://img5.imgtn.bdimg.com/it/u=4169032523,1297392994&fm=27&gp=0.jpg"/>-->
        <min-title-bar title="热门评论"/>

        <user-comment v-for="(item, key) in comment" :key="key" :data="item"/>

        <see-more-btn v-if="nextPage" @onclick="handleNextPage"/>
    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page {
        border-bottom: .8rem solid @color-bg-gray;
        .master-content {
            padding: 0 1.5rem;
            .user-info {
                line-height: 1.5rem;
                font-size: 0;
                padding-top: 1.5rem;
                .user-icon {
                    width: 1.5rem;
                    height: 1.5rem;
                    margin-right: .7rem;
                }

                .right-text {
                    float: right;
                }
                span {
                    font-size: 1.2rem;
                    color: @color-text-gray;
                    vertical-align: middle;
                }
                img {
                    vertical-align: middle;
                }
                .mzsm-icon {
                    height: 1.2rem;
                    margin: .15rem .4rem;
                }
            }

            .content-view {
                padding: .7rem 0;
                font-size: 1.5rem;
                line-height: 2.1rem;
            }

            .imgs-box {
                img {
                    width: 11.1rem;
                    &:not(:nth-child(3n)) {
                        margin-right: .6rem;
                    }
                }
            }
            .date {
                line-height: 1.5rem;
                font-size: 1.1rem;
                padding: .9rem 0 1.3rem;
                .right-text {
                    float: right;
                    font-size: 0;
                    img {
                        height: 1.3rem;
                        vertical-align: bottom;
                        margin-right: .5rem;
                        vertical-align: middle;
                    }
                    span {
                        font-size: 1.2rem;
                        line-height: 1.3rem;
                        vertical-align: middle;
                    }
                }
            }
        }
        .advertisement-box{
            border-top: .8rem solid @color-bg-gray;
        }
    }
</style>

<script>

    import {study} from 'api'

    export default {
        data() {
            return {
                imgs: [],
                user: {
                    src: '',
                    name: '',
                },
                content: '',
                date: '',
                seeNumber: 345,

                comment: [],

                nextPage: true,
                pageNumber: 1,
                pageSize: 10,
            }
        },
        created(){
            this.$store.commit('hideNav', true);
            this.$axios.get(study.API_GOSSIP_DETAIL, {
                params: {
                    gossipId: this.$route.params.id
                }
            }).then(({data})=>{
                this.imgs = [data.picture];
                this.user.src = data.userLogo;
                this.user.name = data.userName;
                this.content = data.content;
                this.seeNumber = data.browseNum;
                this.date = new Date(data.createdAt).toAppTime(true);
            });

            this.requestComment();

        },
        methods: {
            handleComment(cm){
                if(cm){
                    const {gossipRevert, ...obj} = cm;
                    let array = [obj];
                    const next = this.handleComment(gossipRevert);
                    array = array.concat(next);
                    return array;
                }
                return [];
            },
            requestComment(){
                this.$axios.get(study.API_GOSSIP_COMMENT, {
                    params: {
                        gossipId: this.$route.params.id,
                        pageNumber: this.pageNumber
                    }
                }).then(({data})=>{
                    this.nextPage = !data.isLastPage;
                    let array = [];
                    data.list.map(item=>{
                        array = array.concat(this.handleComment(item).map(o => {
                            return {
                                src: o.userPicture,
                                name: o.userName,
                                date: new Date(o.createdAt).toAppTime(true),
                                content: o.commentContent
                            }
                        }))
                    });
                    this.comment = array;
                });
            },
            handleNextPage(){
                this.pageNumber ++;
                this.requestComment();
            }
        }
    }
</script>
